<template>
<div class="account">
    <div class="header">
        <table>
          <tr>
          <td width="98%" style="text-align: center; position: relative; top: 5px; right: -200px; width: 100px; font-size: 20px;">现货账户</td>
          </tr>
        </table>
    </div>
    <div class="card_hd">
      <table>
        <tr>
          <td>现货账户(CNY)</td>
          <td style="text-align: center ; right: -2000px"></td>
        </tr>
      </table>
      <h2>{{ sumTotals }}</h2>
      <p>≈{{ sumTottalsBTC }} BTC</p>
    </div>
    <div class="hd_table">
      <table>
        <tr>
          <td style="padding-left: 10px">小额资产兑换GT</td>
          <td>&gt;</td>
        </tr>
      </table>
    </div>
    <div class="mid">
      <div class="mid_hd">
        <div class="mid_hd_div" id="div1"><input type="checkbox" />隐藏小额资产</div>
        <div class="mid_hd_div" id="div2">
         <input type="text" placeholder="搜索" />
        </div>
       </div>
      </div>
      </div>
      <div id="bill" class="bill" @scroll="getMoreData">
    <div class="b1" v-for="spotAccount in sportWallet" :key="spotAccount.id">
      <img class="pic2" :src="require('@/assets/wallet/account/'+spotAccount.icon)" />
      <p class="p7">{{ spotAccount.name }}</p>
      <p class="p8">{{ spotAccount.name_zh }}</p>
      <p class="p9">{{ spotAccount.qty }}</p>
      <p class="p10">≈{{ (spotAccount.qty * spotAccount.price * rate).toFixed(4) }} CNY</p>

      <table>
        <tr class="tr1">
          <td class="td1">可用/锁定</td>
          <td class="td1">最新价/成本</td>
          <td class="td1">今日/累计盈亏</td>
        </tr>
        <tr class="tr2">
          <td class="td2">{{ spotAccount.qtyLock }}</td>
          <td class="td2">¥{{ spotAccount.price }}</td>
          <td class="td2">¥{{ spotAccount.todayIncom }}</td>
        </tr>
        <tr class="tr2">
          <td class="td2">{{ spotAccount.qty }}</td>
          <td class="td2">¥{{ spotAccount.priceCost }}</td>
          <td class="td2">¥{{ spotAccount.totalIncom }}</td>
        </tr>
      </table>

      <div class="button">
        <RouterLink to="/wealth" class="router-link">
          <p class="p11">理财</p>
        </RouterLink>
        <p class="p13">|</p>
        <RouterLink to="/bill" class="router-link">
          <p class="p12">账单</p>
        </RouterLink>
      </div>

    </div>
  </div>
    
</template>

<script setup>
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';

  const sumTotals = ref(188888.88);
  const sumTottalsBTC = ref(0.262346);

  const sportWallet =ref(
  [
			{
				"id": 1001,
				"name": "ETH",
				"name_zh": "以太坊",
				"qty": 1.568120,
				"qtyLock": 0.000000,
				"price": 1888.88,
				"priceCost": 1000.00,
				"todayIncom": 666.66,
				"totalIncom": 1888.88,
				"icon": "eth.png",
			},
      {
				"id": 1002,
				"name": "GT",
				"name_zh": "狗头",
				"qty": 2000.00,
				"qtyLock": 2000.00,
				"price": 3.33,
				"priceCost": 4.5,
				"todayIncom": 266.66,
				"totalIncom": -1888.88,
				"icon": "gt.png"
			},
			{
				"id": 1003,
				"name": "XRP",
				"name_zh": "瑞波币",
				"qty": 10000.00,
				"qtyLock": 10000.00,
				"price": 0.44444,
				"priceCost": 0.40001,
				"todayIncom": -166.66,
				"totalIncom": 8888.88,
				"icon": "xrp.png"
			},
			{
				"id": 1004,
				"name": "LOOM",
				"name_zh": "LOOM币",
				"qty": 20000.00,
				"qtyLock": 0.00,
				"price": 0.3641,
				"priceCost": 0.4000,
				"todayIncom": -366.66,
				"totalIncom": -888.88,
				"icon": "loom.png"
			},
			{
				"id": 1005,
				"name": "STARL",
				"name_zh": "星链币",
				"qty": 300000.00,
				"qtyLock": 0.00,
				"price": 0.000582,
				"priceCost": 0.001628,
				"todayIncom": 888.88,
				"totalIncom": 16888.88,
				"icon": "starl.png"
			},
			{
				"id": 1006,
				"name": "GT",
				"name_zh": "狗头",
				"qty": 2000.00,
				"qtyLock": 2000.00,
				"price": 3.33,
				"priceCost": 4.5,
				"todayIncom": 266.66,
				"totalIncom": -1888.88,
				"icon": "gt.png"
			},
			{
				"id": 1007,
				"name": "STARL",
				"name_zh": "星链币",
				"qty": 300000.00,
				"qtyLock": 0.00,
				"price": 0.000582,
				"priceCost": 0.001628,
				"todayIncom": 888.88,
				"totalIncom": 16888.88,
				"icon": "starl.png"
			}
		]
  )
    const rate = ref(7.2);
	
	
	
 </script>


<style scoped>
.account {
  margin-top:70px;
  display: flex;
  flex-direction: column;
  width: 1000px;
}
.header table {
  margin: 0 auto;
  width: 95%;
  height: 20px;
}

.header table img {
  width: 15px;
  height: 15px;
}
.card_hd {
  width: 1200px;
  margin: 0 auto;
  margin-top: 15px;
  margin-left:70px; 
  box-shadow: 0px 1px 1px 0px gainsboro;
  background-color: #f9fafc;
  border-radius: 10px;
}
.hd_table {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  margin-top: 10px;
  box-shadow: 0px 10px 0px gainsboro;
  margin-left:100px;
}

.hd_table table {
  margin: 0 auto;
  width: 100%;
  height: 30px;
  background-color: #feecea;
  border-radius: 20px;
  color: #e53c3d;
  font-size: small;
  margin-left:10px;
}

.mid {
  margin-left:100px;
  width: 350px;
  margin-top: 20px;
}

.mid_hd {
  display: flex;
  justify-content: space-around;
}

.mid_hd_div {
  color: #b7b7b7;
  font-size: large;
}
#bill {
	width: 480px;
	height: 960px;
	overflow-y: auto;
}
.b1 {
	height: 213px;
	width: 480px;
	margin-left: 25px;
	margin-top: 20px;
	background-color: #ffffff;
	border: 3px solid #f6f6f6;
	border-radius: 3px;
}
.pic2 {
	height: 30px;
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}
.p7 {
	margin-left: 60px;
	padding-top: 0px;
}
.p8 {
	margin-left: 60px;
	margin-top: -15px;
	color: #b7b7b7;
}
.p9 {
	margin-left: 20px;
	margin-top: 5px;
	font-size: 18px;
}
.p10 {
	margin-left: 95px;
	margin-top: -38px;
	font-size: 14px;
	color: #b7b7b7;
}
table {
	margin-left: 20px;
}
.tr1 {
	color: #b7b7b7;
	width: 350px;
}
.td1 {
	width: 110px;
	font-size: 13px;
}
.td2 {
	width: 110px;
	font-size: 13px;
}
.button {
	height: 35px;
	width: 480px;
	margin-top: -10px;
	background-color: #f6f6f6;
}
.router-link{
	text-decoration: none
}
.p11 {
	font-size: 13px;
	color: dimgrey;
	margin-left: 80px;
	padding-top: 8px;
}
.p12 {
	font-size: 13px;
	color: dimgrey;
	margin-left: 240px;
	margin-top: -30px;
}
.p13 {
	font-size: 13px;
	color: dimgrey;
	margin-left: 175px;
	margin-top: -30px;
}



 </style>
